require("./Popup.scss")

require("../base.js")

const PropTypes = React.PropTypes

class Popup extends React.Component{

    componentWillReceiveProps(newProps){
        // console.log(newProps)
    }

    cancel(){
        const { onCancel } = this.props
        onCancel()
    }

    render(){
        const { title, show,onOk}= this.props
        const cancel = this.cancel.bind(this)

        return (
            <div className={ show ? "popup_cr bln" : "popup_cr bln hide"}>
                <div className="popup_panel">
                    {
                        this.props.showHeader ? <div className="panel_title">
                                <span className="title">{title}</span>
                                <span className="cancel"><a href="#" onClick={cancel}><i className="fa fa-close"></i></a></span>
                            </div> : null
                    }
                    <div className={ this.props.isFluid ? "panel_content fluid" : "panel_content"}>
                        {this.props.children}
                    </div>
                    {
                        this.props.showCtrl ?
                            <div className="panel_ctrl">
                                <div className="btn btn-primary" onClick={onOk}>确定</div>
                                <div className="btn btn-default" onClick={cancel}>取消</div>
                            </div> : null
                    }
                </div>
                <div className="mask" onClick={cancel}></div>
            </div>
        )
    }
}

Popup.propTypes = {
    title: PropTypes.string,
    show : PropTypes.bool,
    ready : PropTypes.bool,
    onOk: PropTypes.func,
    onCancel: PropTypes.func,
    showCtrl : PropTypes.bool,
    showHeader : PropTypes.bool,
    isFluid : PropTypes.bool
}

const defaultProps = {
    title : "",
    show : false,
    ready : true,
    onOk : () => {},
    onCancel : () => {},
    showCtrl : true,
    showHeader : true,
    isFluid : false
}

Popup.defaultProps = defaultProps

export default class extends React.Component{
    appendMaskIntoDoc() {
        ReactDOM.unstable_renderSubtreeIntoContainer(
            this,
            <Popup {...this.props}>
                {this.props.children}
            </Popup>,
            this.container
        )
    }

    componentDidMount() {
        this.container = document.createElement('div')
        document.body.appendChild(this.container)
        this.appendMaskIntoDoc()
    }

    componentDidUpdate() {
        this.appendMaskIntoDoc()
    }

    componentWillUnmount() {
        document.body.removeChild(this.container)
    }

    render(){
        return null
    }
}